/* 
 * 消息中心
 */
import React from 'react';
import './message.css';

class Message extends React.Component {
    state = {
        message: {
            data: [
                {
                    id: 1,
                    content: '恭喜您获得vivo X9手机一台，请联系相关工作人员填写您的地址。',
                    date: '2017-08-07 12:12:45',
                    type: '已读'
                },
                {
                    id: 2,
                    content: '恭喜您获得vivo X9手机一台，请联系相关工作人员填写您的地址。恭喜您获得vivo X9手机一台，请联系相关工作人员填写您的地址。恭喜您获得vivo X9手机一台，请联系相关工作人员填写您的地址。',
                    date: '2017-08-08 13:12:45',
                    type: '已读'
                },
                {
                    id: 3,
                    content: '恭喜您获得vivo X9手机一台，请联系相关工作人员填写您的地址。',
                    date: '2017-08-09 14:12:45',
                    type: '未读'
                },
                {
                    id: 4,
                    content: '恭喜您获得vivo X9手机一台，请联系相关工作人员填写您的地址。',
                    date: '2017-08-10 15:12:45',
                    type: '已读'
                }
            ],
            hasDone: 3,
            toDone: 1
        },
        current: 'all'
    }
    handleTabClick(val) {
        console.log(val)
        this.setState({
            current: val
        })
    }
    componetDidMount() {
        this.setState({
            current: 'all'
        })
    }
    render() {
        const { message } = this.state;
        const { data } = message;
        return (
            <div className="page message">
                <div className="page-head">
                    <h3 className="page-title">消息中心</h3>
                </div>
                <div className="m-wrap">
                    <div className="m-type">
                        <a className={this.state.current === 'all' ? 'active' : null} onClick={this.handleTabClick.bind(this, 'all')}>全部消息</a>
                        <a className={this.state.current === 'hasDone' ? 'active' : null} onClick={this.handleTabClick.bind(this, 'hasDone')}>已读消息（{}）</a>
                        <a className={this.state.current === 'toDone' ? 'active' : null} onClick={this.handleTabClick.bind(this, 'toDone')}>未读消息（{}）</a>
                    </div>
                    <div className="m-content">
                        <div className="page-table">
                            <div className="page-thead">
                                <div className="page-tr">
                                    <div className="page-td-60">标题内容</div>
                                    <div className="page-td-25">时间</div>
                                    <div className="page-td-15">提交类型</div>
                                </div>
                            </div>
                            <div className="page-tbody">
                                {
                                    data.map((item, index) => (
                                        <div className="page-tr" key={index}>
                                            <div className="page-td-60">{item.content}</div>
                                            <div className="page-td-25">{item.date}</div>
                                            <div className="page-td-15">{item.type}</div>
                                        </div>
                                    ))
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Message;